<!-- 研学扩展-学生画像-标签分类 -->
<template>
  <div class="JNPF-common-layout">
    <div class="JNPF-common-layout-left">
      <div class="JNPF-common-title">
        <h2>标签分类</h2>
        <span class="options">
          <el-tooltip content="标签分类" placement="top">
            <el-link icon="el-icon-menu" :underline="false"/>
          </el-tooltip>
        </span>
      </div>

      <el-scrollbar class="JNPF-common-el-tree-scrollbar">
        <el-tree :props="defaultProps"
              accordion :data="treeData"  node-key="id"
          class="JNPF-common-el-tree">
          <span class="custom-tree-node" slot-scope="{ data }">
            <i :class="data.icon" />
            <span class="text">{{data.label}}</span>
          </span>
        </el-tree>
      </el-scrollbar>
    </div>

    <div class="JNPF-common-layout-center">

      <div class="JNPF-common-layout-main JNPF-flex-main">

        <el-tabs v-model="activeName" @tab-click="handleClick">
        
        <el-row class="JNPF-common-search-box" :gutter="16">
          <el-form @submit.native.prevent>
          <el-col :span="6">
            <el-form-item label="标签名称">
                <el-input v-model="keyword" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>

          <template v-if="showAll">
           <el-col :span="6">
            <el-form-item label="难易程度">
              <el-select v-model="keyword" placeholder="请选择">
                <el-option
                  v-for="item in statelist"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          </template>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" >查询</el-button>
              <el-button type="success" icon="el-icon-plus" @click="insert(undefined)">新增</el-button>
              <!-- <el-button type="success" icon="el-icon-download">导出</el-button> -->
              <el-button type="text" icon="el-icon-arrow-down" @click="showAll = true" v-if="!showAll">展开</el-button>
              <el-button type="text" icon="el-icon-arrow-up" @click="showAll = false" v-else>收起</el-button>
            </el-form-item>
          </el-col>
        </el-form>
        </el-row>

        <JNPF-table v-loading="listLoading" :data="list1">
              <el-table-column prop="FCATNO" label="标签编号"  width="95"/>
              <el-table-column prop="FCATNAME" label="标签名称" />
              <el-table-column prop="FCATTYPE" label="所属类型" />      
              <el-table-column prop="FBILLCREDATE" label="创建时间"  width="135"/>
              <el-table-column prop="FBILLSTATE" label="状态" width="85"/>
            </JNPF-table>
            <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />
        <Form ref="Form" :parelist="list1" />

      </el-tabs>
       
      </div>

    </div>
  </div>
</template>

<script>
import Form from "./Form.vue"
export default {
  name: 'base05',
  components: { Form },
  data() {
    return {
      activeName: 'first',

      keyword: '',
      showAll:false,
      list: [],
      statelist:[
        {value:0,label:"全部"}
        ,{value:1,label:"未审核"}
        ,{value:2,label:"已审核"}
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      treeData: [{
          label: "自我认知维度",
          children: [{
            label: "‌性格特质",
            children: [{
              label: "内向/外向"
            },{
              label: "情绪稳定性"
            },{
              label: "责任意识"
            }]
          },{
            label: "兴趣偏好",
            children: [{
              label: "学科兴趣"
            },{
              label: "艺术特长"
            },{
              label: "运动倾向"
            }]
          },{
            label: "‌能力评估",
            children: [{
              label: "辑推理能力"
            },{
              label: "语言表达能力"
            },{
              label: "动手实践能力"
            }]
          }]
        }, {
          label: "心理状态维度",
          children: [{
            label: "‌情绪特征",
            children: [{
              label: "焦虑水平"
            },{
              label: "抑郁倾向"
            },{
              label: "情绪调节"
            }]
          },{
            label: "‌压力类型",
            children: [{
              label: "学业压力"
            },{
              label: "家庭关系压力"
            },{
              label: "同伴竞争压力"
            }]
          },{
            label: "‌心理健康等级",
            children: [{
              label: "健康"
            },{
              label: "亚健康"
            },{
              label: "需干预"
            }]
          }]
        }, {
          label: "行为表现维度‌",
          children: [{
            label: "学习行为",
            children: [{
              label: "作业完成度"
            },{
              label: "课堂参与度"
            },{
              label: "自主学习习惯"
            }]
          },{
            label: "‌社交互动‌",
            children: [{
              label: "同伴关系质量（合作/冲突）"
            },{
              label: "师生互动频率"
            },{
              label: "集体活动参与度"
            }]
          },{
            label: "‌行为边界",
            children: [{
              label: "遵守规则意识"
            },{
              label: "自我约束能力"
            }]
          }]
        }
         ],
      total: 0,
      listLoading: false,
      listQuery: {
          page: 1,
          limit: 20,
          sort: "desc",
          sidx: "",
          fcatno: "",
          fcatname: ""
        },
      formVisible: false,

      // 参考题库 https://max.book118.com/html/2024/1024/6021020025010235.shtm
      //https://wenku.baidu.com/tfview/aea88bcba98271fe900ef943.html?fr=launch_ad&SS-bdtg47=&utm_source=bdss-WD&utm_medium=cpc&keyword=%E9%AB%98%E6%A0%A1%E5%AE%9E%E9%AA%8C%E5%AE%A4%E5%AE%89%E5%85%A8%E8%80%83%E8%AF%95%E9%A2%98%E5%BA%93%E7%AD%94%E6%A1%88&utm_account=SS-bdtg47&utm_term=5&utm_content=4&e_creative=59921291097&e_keywordid=416730695876&bd_vid=9336939463705346823&_wkts_=1734261811500&needWelcomeRecommand=1
      list1:[
            {
            "FCATNO":"10",
            "FCATNAME": "自我认知维度‌",
            "FCATTYPE": "",
            "FCATLEVEL":"☆☆☆",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            },{
            "FCATNO":"1001",
            "FCATNAME": "‌性格特质",
            "FCATTYPE": "自我认知维度‌",
            "FCATLEVEL":"☆☆☆",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            }
            ,{
            "FCATNO":"100101",
            "FCATNAME": "内向/外向",
            "FCATTYPE": "‌性格特质",
            "FCATLEVEL":"☆☆☆",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            },{
            "FCATNO":"100102",
            "FCATNAME": "情绪稳定性",
            "FCATTYPE": "‌性格特质",
            "FCATLEVEL":"☆☆☆",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            },{
            "FCATNO":"100103",
            "FCATNAME": "责任意识",
            "FCATTYPE": "‌性格特质",
            "FCATLEVEL":"☆☆☆",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            },{
            "FCATNO":"1002",
            "FCATNAME": "‌兴趣偏好",
            "FCATTYPE": "自我认知维度",
            "FCATLEVEL":"☆☆☆",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            },{
            "FCATNO":"100201",
            "FCATNAME": "学科兴趣",
            "FCATTYPE": "‌兴趣偏好",
            "FCATLEVEL":"☆☆☆",
            "FBILLCREDATE": "2024-12-15 19:36:09",
            "FBILLSTATE": "正常"
            },
        ],

    }
  },
  created() {
  },
  methods: {
   initData(){
     console.log("initData")
   },

   insert(row) {
        this.$refs.Form.init(row);
      },
  }
}
</script>